<template>
	<div class="crumbs-box">
		<ul>
			<li 
				:class="{'cur': index == 0 || index != crumbs.length-1}" 
				v-for="(item, index) in crumbs" 
				@click="go(item)"
			>
				{{item.departmentName}}
				<span>
					<i  class="icon-triangleRight" 
						v-if="index != crumbs.length-1"
					></i>
				</span>
			</li>
		</ul>
	</div>
</template>

<script>
export default {

  	name: 'crumbs',

  	props: {
  		enterpriseId: String,
  		departmentId: [String, Number]
  	},

  	data () {
	    return {
	    	enterprises: null,
	    	enterprise: null,
	    	crumbs: []

	    };
  	},

  	created () {
  		this.getCrumbs(this.enterpriseId, this.departmentId);
  	},

  	methods: {
  		getCrumbs (enterpriseId, departmentId) {
  			this.crumbs= [{
				departmentId: '0',
				departmentName: this.cache.defaultEnterprise.enterpriseName
			}];
  			this.$http.post(this.api.eab, {
  				module: 'department',
  				action: 'getParentDepartmentList',
  				departmentId: departmentId
  			}, {showLoading: true}).then(
  				res => {
  					if (res.body.result === 1) {
  						if (res.body.data.departmentList) {
  							res.body.data.departmentList.forEach(v => {
	  							this.crumbs.push(v);
	  						});
  						}
  					}
  				}
  			);
  		},

  		go (item) {
	  		this.$router.replace({
	  			name: 'list', 
	  			params: {
	  				departmentId: item.departmentId
	  			}
	  		});
	  	}
  	},

  	watch: {
  		departmentId (a, b) {
  			this.getCrumbs(this.enterpriseId, this.departmentId);
  		}
  	}
};
</script>

<style lang="scss" scoped>
	.crumbs-box{
		width: 100%;
		height: 100px;
		background: #fff;
		
		ul{
			width: 100%;
			height: 100px;
			line-height: 100px;
			white-space:nowrap;
			overflow-y: hidden;
			overflow-x: auto;
			font-size: 0;

			li{
				display: inline-block;
				position: relative;
				height: 100%;
				vertical-align: middle;
				font-size: 28px;

				&:first-child{
					padding-left: 10px;
				}

				&.cur{
					color: #30c5c3;
				}

				span{
					display: inline-block;
					width: 30px;
					height: 100px;
					position: relative;
					vertical-align: middle;
				}
			}
		}
	}
</style>